<script setup lang="ts">
import AuthStatus from './AuthStatus.vue';

const userStore = useUserStore();
const statusText = computed(() => {
  return userStore.verified?.authenticator ? $t('cpynOUwHi5LdYcuwQgxn') : $t('6NsQ3pe8j4vik8PyLf8Z7');
});
</script>

<template>
  <TCard
    class="text-sm" title="2FA"
    bodyClass="flex flex-col text-sys-text-body gap-2"
  >
    <template #action>
      <AuthStatus :authed="userStore.verified?.authenticator">
        {{ statusText }}
      </AuthStatus>
    </template>

    <div>{{ $t('0Ic0xQ5uz5gP0Ih7hIWq') }}</div>

    <AButton
      v-if="userStore.verified?.authenticator"
      class="ant-cover__Button-3d-primary mt-auto" block
      type="primary" @click="openAuthFlowPopup('disable2FA')"
    >
      {{ $t('x4Gi2kLpTxGs390Dq5Kc0') }}
    </AButton>
    <AButton
      v-else
      class="ant-cover__Button-3d-blue mt-auto" block
      type="primary" @click="openAuthFlowPopup('enable2FA')"
    >
      {{ $t('tGhNjy3BhBumDmvRuaFvv') }}
    </AButton>
  </TCard>
</template>
